<%--
  @author Kusal Samarakoon
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>


<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler_serialize.js" type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler_multiselect.js" type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/dhtmlxscheduler_glossy.css" type="text/css" media="screen"
      title="no title" charset="utf-8">
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler_year_view.js" type="text/javascript"
        charset="utf-8"></script>

<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxscheduler_editors.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/dhtmlxcombo.css" type="text/css">
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxcommon.js"></script>
<script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/dhtmlxcombo.js"></script>

<s:if test=" language=='si' ">
    <script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/locale_si.js" type="text/javascript" charset="utf-8"></script>
</s:if>
<s:elseif test=" language=='ta' ">
    <script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/locale_ta.js" type="text/javascript" charset="utf-8"></script>
</s:elseif>
<s:else>
    <script src="${pageContext.request.contextPath}/lib/jquery/fullcalender/locale_en.js" type="text/javascript" charset="utf-8"></script>
</s:else>

<div id="calender-schedule-module-title" class="module-home-title">
    <s:a><img src="${pageContext.request.contextPath}/images/calendar-icon.png"
              alt="Calender Schedule"><span><s:label
            value="%{getText('calender_schedule_ormoi_schedule.label')}"/></span></s:a>

</div>


<style type="text/css" media="screen">


</style>

<script type="text/javascript" charset="utf-8">
    var scheduleData;
    function init() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();


        scheduler.config.multi_day = true;

        scheduler.config.xml_date = "%Y-%m-%d %H:%i";
        scheduler.config.first_hour = 8;
        scheduler.config.details_on_create = true;
        scheduler.config.details_on_dblclick = true;

        scheduler.config.prevent_cache = true;
        scheduler.init('scheduler_here', date, "month");


        $.getJSON('${pageContext.request.contextPath}/common/CalenderLookupService', {type:"calender",mode:"getList",edit:"yes"}, function(data) {

            scheduleData = data.allScheduleData;
            scheduler.parse(scheduleData, "json");
        });

        /*//get organization list
         $.getJSON('${pageContext.request.contextPath}/common/CalenderLookupService', {type:"calender",mode:"organization"}, function(data) {
         var organizationList = data.organizationData;


         scheduler.config.lightbox.sections = [
         { name:"userselect", height:50, map_to:"text", type:"textarea", focus:true },
         { name:"location", height:22, map_to:"user_id", type:"textarea"},
         { name:"description", height:43, type:"textarea", map_to:"details" },
         { name:"mapUser", options:organizationList, type:"select", map_to:"mapUser"},
         { name:"time", height:72, type:"time", map_to:"auto"}
         ];
         });*/

        //with out organization List
        scheduler.config.lightbox.sections = [
            { name:"userselect", height:50, map_to:"text", type:"textarea", focus:true },
            { name:"location", height:40, map_to:"location", type:"textarea"},
//            { name:"description", height:43, type:"textarea", map_to:"details" },
//            // { name:"mapUser", options:organizationList, type:"select", map_to:"mapUser"},
            { name:"time", height:72, type:"time", map_to:"auto"}
        ];


        scheduler.attachEvent("onEventSave", function(id, data, is_new_event) {


            var convert = scheduler.date.date_to_str("%Y-%m-%d %H:%i");
            stDate = convert(data.start_date);
            edDate = convert(data.end_date);

            if (is_new_event) {
                $.getJSON('${pageContext.request.contextPath}/common/CalenderLookupService', {type:"calender",mode:"save",
                    calenderId:id,title:data.text,location:data.location,description:data.details,startDate:stDate,endDate:edDate,mapUser:data.mapUser}, function(data) {

                });
            } else {
                $.getJSON('${pageContext.request.contextPath}/common/CalenderLookupService', {type:"calender",mode:"edit",
                    calenderId:id,title:data.text,location:data.location,description:data.details,startDate:stDate,endDate:edDate,mapUser:data.mapUser}, function(data) {

                });
            }


            if (!data.text) {
                //alert("Title must not be empty");
                alert(scheduler.locale.labels.title_alert);
                return false;
            }

            return true;
        });

        scheduler.attachEvent("onEventDeleted", function(event_id) {
            //alert("delete");
            $.getJSON('${pageContext.request.contextPath}/common/CalenderLookupService', {type:"calender",mode:"delete",calenderId:event_id}, function(data) {

            });

        });


    }
    function show_minical() {
        if (scheduler.isCalendarVisible())
            scheduler.destroyCalendar();
        else
            scheduler.renderCalendar({
                position:"dhx_minical_icon",
                date:scheduler._date,
                navigation:true,
                handler:function(date, calendar) {
                    scheduler.setCurrentView(date);
                    scheduler.destroyCalendar()
                }
            });

    }
</script>

<body onload="init();">


<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%; '>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_minical_icon" id="dhx_minical_icon" onclick="show_minical()">&nbsp;</div>

        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
        <div class="dhx_cal_tab" name="year_tab" style="right:270px;"></div>
    </div>
    <div class="dhx_cal_header">
    </div>
    <div class="dhx_cal_data">
    </div>
</div>
</body>
